<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin-bottom: 30px;
        }
        /* .table tr:nth-child(2n-1) { */
        .table tr:nth-child(odd) {
            background-color: #fff;
        }

        /* .table tr:nth-child(2n) { */
        .table tr:nth-child(even) {
            background-color: #ccc;
        }

        .table tr:hover {
            background-color: yellow;
        }

        .btn {
            height: 30px;
            width: 50px;
            border: 1px solid black;
            border-radius: 10px;
            background-color: #ccc;
            text-align: center;
            line-height: 30px;
            font-weight: bold;
        }

        .btn:hover {
            background-color: yellow;
        }

        .shadow{
            width: 300px;
            height: 100px;
            background-color: red;
            box-shadow: 10px 20px 5px #888;
        }

        .rotate-div{
            width: 200px;
            height: 300px;
            border: 1px solid black;
            background-color: green;
            margin: 100px auto;
            transform: rotate(15deg);
            color: yellow;
            font-size: 20px;
            text-align: center;
            line-height: 300px;
            font-weight: bold;
        }

        .list-style{
            list-style-type: none;
        }

        .list-style li {
            /* padding-right: 5px; */
            float: left;
        }

        .list-style div {
            background-color: #ccc;
            /* border: 1px solid black; */
            width: 80px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }

        .list-style div:hover{
            background-color: yellow;
            color: red;
        }
    </style>
</head>

<!-- 请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。 -->

<body>
    <table border="1" class="table">
        <tr>
            <td>1</td>
            <td>第一行</td>
        </tr>
        <tr>
            <td>2</td>
            <td>第二行</td>
        </tr>
        <tr>
            <td>3</td>
            <td>第三行</td>
        </tr>
        <tr>
            <td>4</td>
            <td>第四行</td>
        </tr>
        <tr>
            <td>5</td>
            <td>第五行</td>
        </tr>
    </table>

    <hr />

    <div class="btn">
        <span>确定</span>
    </div>

    <hr/>

    <div class="shadow"></div>

    <hr/>

    <div class="rotate-div">Web前端开发</div>

    <hr/>

    <ul class="list-style">
        <li>
            <div>菜单1</div>
        </li>
        <li>
            <div>菜单2</div>
        </li>
        <li>
            <div>菜单3</div>
        </li>
    </ul>
</body>

</html>